<template>
  <div class="page">
    <div class="page-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-empty v-show="dataList.length <= 0" description="" />
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :error.sync="errorLoading"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="page-list-item"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="page-list-item-inner mid">
              <!-- <div
                v-show="item.status == '4'"
                class="operate"
                @click="moduleAction('qrcode', item)"
              >
                <van-icon name="qr"  />
              </div> -->
              <div class="w100">
                <van-row type="flex" justify="start" class="w100">
                  <van-col span="24" class="mid mb10">
                    返校人员：{{item.name}}
                  </van-col>
                  <van-col span="24" class="mid mb10">
                    返校时间：{{ item.return_time }}
                  </van-col>
                  <van-col span="24" class="mid mb10">
                    申请时间：{{ item.create_time }}
                  </van-col>
                  <van-col span="24" class="mid">
                    审核状态：{{ item.status_name }}
                  </van-col>
                </van-row>
                <div class="bottom" v-if="item.status == '3'">
                  <van-button
                    class="bottom-btn"
                    size="small"
                    color="#D58913"
                    type="info"
                    text="确认返校"
                    @click.stop="moduleAction('apply', item)"
                  />
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-overlay :show="qrCodeShow" @click="qrcodeClick">
      <div class="qrcode-box">
        <div class="qrcode-bg">
          <div id="qrcode"></div>
        </div>
      </div>
    </van-overlay>
    <van-dialog
      v-model="applyShow"
      show-cancel-button
      @cancel="applyCancel"
      @confirm="submitAction"
      :before-close="beforeClose"
    >
      <div class="form-card">
        <van-form
          label-width="110px"
          ref="form"
          scroll-to-error
          :show-error-message="false"
          @failed="onFailed"
          @submit="onSubmit"
        >
          <van-field
            name="sex"
            required
            :rules="[{ required: true, message: '请检查是否返校' }]"
            label="是否返校"
          >
            <template #input>
              <van-radio-group
                v-model="formData.status"
                checked-color="#D58913"
                direction="horizontal"
              >
                <van-radio name="5">是</van-radio>
                <van-radio name="6">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-if="formData.status == '6'"
            v-model="formData.reason"
            rows="3"
            label="不能到校原因"
            type="textarea"
            maxlength="255"
            placeholder="请输入不能到校原因"
            required
            :rules="[{ required: true, message: '请检查不能到校原因' }]"
          >
          </van-field>
        </van-form>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { getReturnRecord, applyReturn } from '@/api/school'

export default {
  data() {
    return {
      dataList: [],
      route: {},
      page: {
        num: 1,
        total: 0,
      },
      url: {
        icon_arrow_right: require('../../assets/images/school/icon_arrow_golden.png'),
      },
      loading: true,
      errorLoading: false,
      finished: false,
      refreshing: false,
      qrCodeShow: false,
      qrcode: {},
      formData: {},
      applyShow: false,
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.route = this.$route.query
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      this.onLoad()
    },
    getListAction() {
      const data = {
        pageNo: this.page.num,
        pageSize: 20,
        card_no: this.route.card_no,
      }
      getReturnRecord(data).then((ret) => {
        const data = ret.data
        if (data.errcode === 0) {
          this.dataList.push(...data.data.results)
          this.page.total = data.data.totalRecord
          this.page.num += 1
          if (data.data.pageNo >= data.data.totalPage) {
            this.finished = true
          }
        } else {
          this.errorLoading = true
        }
        this.loading = false
      })
    },
    onRefresh() {
      document.querySelector('html').scrollTop = '0'
      // 重置筛选数据
      this.checkedList = []
      // 清空列表数据
      this.finished = false
      this.refreshing = true
      // 重新加载数据
      this.loading = true
      this.page.num = 1
      this.onLoad()
    },
    onLoad() {
      // 异步更新数据
      // if (this.userInfo.cardNo) {
      if (this.refreshing) {
        this.dataList = []
        this.page.num = 1
        this.refreshing = false
      }
      this.getListAction()
      // } else {
      //   this.loading = false
      // }
    },
    failNotice(msg) {
      this.$notify({ type: 'danger', message: msg })
    },
    onFailed(errorInfo) {
      this.failNotice(errorInfo.errors[0].message)
    },
    submitAction() {
      this.$refs.form.submit()
    },
    async onSubmit() {
      // 校验
      if (this.formData.status == '5') {
        delete this.formData.reason
      }
      this.applyConfirm()
    },

    moduleAction(type, item) {
      switch (type) {
        case 'apply':
          this.formData.record_id = item.record_id
          this.applyShow = true
          break
        // case 'qrcode':
        //   let qrcode = new QRCode('qrcode', {
        //     width: 200, //图像宽度
        //     height: 200, //图像高度
        //     text:
        //       'http://dalianyqschoolmobile.lngov.top/#/school/return-detail?id=' +
        //       item.id +
        //       '&record_id=' +
        //       item.record_id +
        //       '&type=confirm',
        //   })
        //   this.qrCodeShow = true
        //   break
      }
    },
    beforeClose(action, done) {
      done(false)
    },
    applyConfirm() {
      this.$dialog
        .confirm({
          title: '是否确认',
          message: '',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonColor: '#D58913',
          beforeClose: async (action, done) => {
            if (action === 'confirm') {
              const param = { ...this.formData }
              const updateData = await applyReturn(param)
              if (updateData.data.errcode == 0) {
                this.$toast('操作成功')
                setTimeout(() => {
                  this.onRefresh()
                  this.applyCancel()
                }, 500)
                done()
              } else {
                this.$toast(updateData.data.errmsg)
                this.applyCancel()
                done()
              }
            } else {
              done()
            }
          },
        })
        .catch(() => {})
    },
    applyCancel() {
      this.formData = {}
      this.applyShow = false
    },
    qrcodeClick() {
      this.qrCodeShow = false
      document.getElementById('qrcode').innerHTML = ''
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  //padding: 10px;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  color: black;
  position: relative;
  .page-list {
    height: calc(100% - 50px);
    padding-top: 1.6em;
    .van-pull-refresh {
      height: 100%;
    }
  }
  /deep/.van-search__content--round {
    border-radius: 10px;
  }
  /deep/.van-search__content {
    background-color: #fff;
  }

  &-list {
    box-sizing: border-box;
    width: 100%;

    & > :not(:last-child) {
      border-bottom: 1px solid #ededed;
    }

    &-item {
      margin-bottom: 20px;
      position: relative;

      .arrow {
        position: absolute;
        right: 15px;
        top: 35%;
        width: 40px;
        height: 40px;
      }

      &-inner {
        margin: 15px 10px;
        padding: 20px 40px 20px 30px;
        min-height: 80px;
        text-align: left;
        border-radius: 20px;
        background: #fff;
        position: relative;
        overflow: hidden;

        .operate {
          position: absolute;
          right: 0px;
          top: 0px;
          background-color: #ff9100;
          border-bottom-left-radius: 20px;
          padding: 7px 10px;
          color: #fff;
        }
      }
    }
  }
}
.qrcode-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrcode-bg {
  background-color: #fff;
  width: 250px;
  height: 250px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom {
  display: flex;
  justify-content: center;
  margin-top: 20px;

  &-btn {
    width: 40%;
    border-radius: 5px;
  }
}
.form-card {
  padding: 20px;
  box-sizing: border-box;
}
</style>
